

<template>
<div>
  <div class="logNavTop" :style="{height: navBarHeight + 'px'}">
      <p :style="{height: statusBarHeight + 'px'}"></p>
      <p class="logNavTopIMG" @click="ruterBack()"><img src="../../../../static/images/ruterLeft.png"></p>
      <p class="logNavToptxt" :style="{height: titleBarHeight + 'px',lineHeight:titleBarHeight + 'px'}">登录</p>
  </div>
  <p :style="{height: navBarHeight + 'px'}"></p>
  <div class="loginTop">
      <p class="loginToptxt">您好！</p>
      <div class="clearfix">
        <p class="loginToptxtleft fl">欢迎来到</p>
        <p class="fl loginToptxtright"><img src='../../../../static/images/logo.png'>成都机场贵宾中心</p>
      </div>     
  </div>

  <div class='loginBtn'>
    <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >微信授权一键登录</button>
  </div>
  
   <p  class="loginRegister" @click="accountLogin()">手机号码注册/登录</p>
   <p class="notLogIn" v-if="isLogin==1" @click="notLogIn()">暂不登录</p>
    <p class="notLogIn" v-else-if="isLogin==2" @click="signOut()">退出当前帐号</p>
</div>
</template>

<script>

export default {    
  data(){
    return{
      encrypdata:'',
      ivdata:'',
      sessionkey:'',
      isLogin:1,
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
    }
  },
  onShow(){
    console.log(this.$store.state.uat,'this.$store.state.uat')
    if(this.$store.state.uat!==''&&this.$store.state.uat!=null&&this.$store.state.uat!=undefined){
      this.isLogin=2
    }else{
      this.isLogin=1
    }
  },
   beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(system)
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
        console.log(self.navBarHeight,self.statusBarHeight,self.titleBarHeight)
      }
    });
  },
  methods: {
    //获取微信手机号的认证信息
    getPhoneNumber (e) {
      var that=this
      that.encrypdata=e.mp.detail.encryptedData
      that.ivdata=e.mp.detail.iv
      wx.login({
        success: function(res) {
          if (res.code) {
            var dataCode={
              code:res.code
            }
            //发起网络请求
            that.$api.user.WXauthorization(dataCode).then(row=>{  
                if(row.status===0){
                    
                  that.sessionkey=row.data.session_key
                  
                  that.getTelNumber()
                }else{
                  wx.showToast({
                    title: row.message,
                    icon: "none",
                    duration: 1000
                  });
                }
            })
          }else{
            wx.showToast({
              title: row.message,
              icon: "none",
              duration: 1000
            });
          }
        }
      });
    },
    //获取手机号
    getTelNumber(){
      var that=this
      var data={
        encrypdata:that.encrypdata,
        ivdata:that.ivdata,
        sessionkey:that.sessionkey
      }
      //发起网络请求
      that.$api.user.WXgetTel(data).then(res=>{
        console.log(res,'resres')
          if(res.status===0){
            that.$store.commit('getWxPhone',res.data.phone);
            that.loginByWx()                 
          }else{
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 1000
            });
          }
          that.common.hideToast();
      })
    },
    //跳转登陆注册页
    accountLogin(){
      wx.navigateTo({
        url:"/pages/login/accountLogin/main"
      })
    },
    //登陆
    loginByWx(){
      var that=this
       wx.login({
        success: function(res) {
          if (res.code) {
            var dataCode={
              code:res.code
            }
            // console.log(dataCode)
            // return false
            //发起网络请求
            that.$api.user.loginByWx(dataCode).then(row=>{ 
                if(row.status===0){
                    wx.setStorageSync("uat",row.data.uat)
                    if(row.data!=null&&row.data!=''&&row.data!=undefined){
                      that.$store.commit('getUserInfo',row.data);
                      that.$store.commit('uat',row.data.uat);
                    }  
                    wx.showToast({
                      title: '成功登陆',
                      icon: "success",
                      duration: 1000,
                        success:function(){
                          setTimeout(function(){
                            wx.navigateBack({delta: 1})
                          }, 1000);
                      }
                    });
                }else{
                  wx.showToast({
                    title: row.message,
                    icon: "none",
                    duration: 1000
                  });
                }
            })
          }else{
            wx.showToast({
              title: row.message,
              icon: "none",
              duration: 1000
            });
          }
        }
      });
    },
    //获取微信用户信息
    bingGetUserInfo(e){
      console.log(e);
    },
    //暂不登录
    notLogIn(){
      wx.switchTab({
        url:"/pages/index/index/main"
      })
    },
    //退出登陆
    signOut(){
       wx.setStorageSync("uat")
       this.$store.commit('getUat','');
       wx.switchTab({
        url:"/pages/index/index/main"
      })
    },
    //返回返回上一页
    ruterBack(){
     wx.navigateBack({
        delta: 1
      });
    }
    
  }
}
</script>

<style scoped>
.logNavTop{
  width: 100%;
  position: fixed;
  z-index: 999999999;
  background: #fff;
  top: 0px;
  left: 0px;
}
.logNavTopIMG{
  width:22px;
height:22px;
  position: absolute;
  top: 50%;
  left: 15px;
}
.logNavTopIMG img{
width:22px;
height:22px;
}
.logNavToptxt{
  width: 100%;
  line-height: 44px;
  text-align: center;
  font-size:16px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
}
.loginTop{
  width: 100%;
  padding: 80px 15px 70px;
}
.loginToptxt{
  font-size:24px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(51,51,51,1);
  margin-bottom: 24px;
}
.loginToptxtleft{
  font-size:15px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(153,153,153,1);
}
.loginToptxtright{
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(77,77,77,1);
padding-left: 36px;
position: relative;
}
.loginToptxtright img{
  width: 90px;
  height: 32px;
  position: absolute;
  top: -16px;
  left: 5px;
}
.loginBtn{
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}
.loginBtn button{
  width: 100%;
  height:45px;
  background:rgba(204,170,126,1);
  border-radius:3px;
  color: #fff;
  border:none;
  box-sizing: border-box;
  line-height: 45px;
}
.loginRegister{
  width: 100%;
  font-size:16px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(204,170,126,1);
line-height:22px;
text-align: center;
margin-top: 30px;
}
.notLogIn{
  width: 100%;
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(204,170,126,1);
text-align: center;
position:fixed;
bottom: 30px;
}
</style>
